<template>
  <el-dialog
    :title="form.tagTitle"
    :visible.sync="dialogVisible"
    width="40%"
    class="showDialogClass"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <div style="max-height: 470px; overflow-y: scroll">
      <el-form
        ref="form"
        :model="form"
        label-width="190px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="标签名称"
              prop="name"
              :rules="[
                { required: true, message: '标签名称不能为空'},
              ]"
            >
              <el-input
                v-model="form.name"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item
              label="标签排序"
              prop="sort"
              :rules="[
                { required: true, message: '排序不能为空'},
                { type: 'number', message: '排序必须为数字值'}
              ]"
            >
              <el-input
                v-model.number="form.sort"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="cancel()">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm()"
      >保 存</el-button>
    </span>
  </el-dialog>
</template>

  <script>
  import { getDetail, updateTag } from "@/api/knowledge/label";
  import store from "@/store";

  export default {
    name: `addTag`,
    components: {},
    mounted () {},
    computed: {
      scrollerHeight: function () {
        return `${window.innerHeight - 150}px`;
      },
    },
    data () {
      return {
        dialogVisible: false,
        form: {
          id: null,
          name: ``,
          sort: ``,
          tagTitle: ``,
        },
        rule: {
          name: [{ required: true, message: `不能为空`, trigger: `blur` }],
          sort: [{ required: true, message: `不能为空`, trigger: `blur` }],
        },
        tableDetail: {},
        fileBusinessTypeId:"111"
      };
    },
    methods: {
      init (id) {
        // console.log(id)
        //如果有传入id 就表示当前为修改操作，没有传入就是新增操作
        if (id != null) {
          this.getTagByid(id)
          this.form.id = id;
          this.form.tagTitle = `编辑`;
        }
        else {
          this.form.tagTitle = `新增`;
          this.dialogVisible = true
        }
      },
      getTagByid (id) {
        const params = {
          'userId': store.getters.user_id.toString(),
          'token': store.getters.token.toString(),
          userName: store.getters.userName.toString(),
          data: { labelId: id },
        }
        getDetail(params).then((data) => {
          console.log(data, `data数据`);
          if (data.result) {
            this.tableDetail = data.resultdata.data
            console.log(this.tableDetail, `詳情`)
            this.form.name = data.resultdata.data.labelName
            this.form.sort = data.resultdata.data.labelOrder
            this.dialogVisible = true
          }
        })
      },
      submitForm () {
        if (this.form.name === `` || this.form.sort === ``) {
          this.$message({
            message: `请填写完整信息`,
            type: `warning`,
          })
          return
        }
        const param={
          "data": {
            "labelId": this.tableDetail.labelId,
            "labelName": this.form.name,
            labelOrder: this.form.sort,
            fileBusinessTypeId:this.fileBusinessTypeId
          },
          'userId': store.getters.user_id.toString(),
          'token': store.getters.token.toString(),
          userName: store.getters.userName.toString(),
        }
        if (this.form.tagTitle === `编辑`) {
          updateTag(param).then((data) => {
            this.init();
            this.$emit(`refresh`)
            this.dialogVisible = false;
          })
        }
        else if (this.form.tagTitle === `新增`) {
          const params={
            "data": {
              "fileBusinessTypeId":this.fileBusinessTypeId,
              "labelName": this.form.name,
              labelOrder: this.form.sort,
            },
            'userId': store.getters.user_id.toString(),
            'token': store.getters.token.toString(),
            userName: store.getters.userName.toString(),
          }
          updateTag(params).then((data) => {
            this.init();
            this.$emit(`refresh`)
            this.dialogVisible = false;
          })
        }
      },
      cancel () {
        this.dialogVisible = false;
        this.form = {
          name: ``,
          sort: ``,
        };
      },
      handleClose () {
        this.cancel();
      },
    },
  };
</script>

  <style scoped>
</style>
